import { Page, Image, Title } from "@/components";
import Luoxiaohei from '@/assets/images/luoxiaohei.jpg'
import ScrollIntoView from "@/doc/components/ScrollIntoView";

const ImageExemple = () => {
  return (
    <Page
      pageHeader={{
        title: '图标 Icon',
        descriptions: '展示和预览图片。',
        breadcrumb: {
          list: [
            {
              title: 'CompCards',
              path: '/compCards'
            },
            {
              title: 'ImageExemple',
              path: '/exemples/imageExemple'
            }
          ]
        }
      }}
    >

      <ScrollIntoView>
        <Title title="基本">
          <Image
            circular
            src={Luoxiaohei}
            width={200}
            height={200}
          />
        </Title>
        <Title title="预览" >
          <div className="flex gap20" >
            <Image
              src={Luoxiaohei}
              width={200}
              height={200}
              preview
            />
          </div>
        </Title>
        <Title id="aaa" title="关闭按钮" >
          <div className="flex gap20">
            <Image
              src={Luoxiaohei}
              width={200}
              height={200}
              closeShow='always'
              onClose={() => {
                console.log('onClose');

              }}
            />
          </div>
        </Title>
        <Title title="遮罩" >
          <div className="flex gap20">
            <Image
              src={Luoxiaohei}
              width={200}
              height={200}
              optionsShow="hover"
              mask
              optionsRender={() => {
                return (
                  <div>
                    操作操作操作操作操作操作操作
                  </div>
                )
              }}
            />
          </div>
        </Title>
        {/* （默认显示预览按钮， 支持自定义） */}
        <Title title="操作" >
          <div className="flex gap20">
            <Image
              src={Luoxiaohei}
              width={200}
              height={200}
              optionsShow="always"
              mask
              optionsRender={() => {
                return (
                  <div>
                    操作操作操作操作操作操作操作
                  </div>
                )
              }}
            />
            <Image
              src={Luoxiaohei}
              width={200}
              height={200}
              optionsShow="hover"
              optionsRender={() => {
                return (
                  <div>
                    操作操作操作操作操作操作操作
                  </div>
                )
              }}
            />
          </div>
        </Title>
        <Title title="加载失败" >
          <div className="flex gap20 flex-warp">
            <Image
              src={'Luoxiaohei'}
              width={200}
              height={200}
              optionsShow="always"
            />
            <Image
              src={'Luoxiaohei'}
              error="error"
              width={200}
              height={200}
              optionsShow="always"
            />

          </div>
        </Title>
        <Title title="默认图片">
          <div className="flex gap20">
            <Image
              src={'Luoxiaohei'}
              defaultSrc={Luoxiaohei}
              width={200}
              height={200}
              preview
            />
          </div>
        </Title>
      </ScrollIntoView>
    </Page>
  )
}
export default ImageExemple